`<!--
    -    Copyright (c) 2018-2025, bfcloud All rights reserved.
    -
    - Redistribution and use in source and binary forms, with or without
    - modification, are permitted provided that the following conditions are met:
    -
    - Redistributions of source code must retain the above copyright notice,
    - this list of conditions and the following disclaimer.
    - Redistributions in binary form must reproduce the above copyright
    - notice, this list of conditions and the following disclaimer in the
    - documentation and/or other materials provided with the distribution.
    - Neither the name of the pig4cloud.com developer nor the names of its
    - contributors may be used to endorse or promote products derived from
    - this software without specific prior written permission.
    - Author: bfcloud
    -->

<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="5">
          <div class="user__tree boxsty">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable></el-input>
            <el-tree ref="tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"
                     class="filter-tree" node-key="id" highlight-current :default-expanded-keys="[1]" accordion
                     @node-click="getNodeData"/>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="19">
          <div class="user__main boxsty filter-container">
            <div class="flex justifyContentSpaceBetween">
              <div class="tabletext">部门管理</div>
              <div class="tablelink">
                <el-link icon="el-icon-plus" v-if="deptManager_btn_add" type="primary" @click="handlerAdd" :underline="false">添加</el-link>
                <el-link icon="el-icon-edit" v-if="deptManager_btn_edit" type="primary" @click="handlerEdit" :underline="false">编辑</el-link>
                <el-link icon="el-icon-delete" v-if="deptManager_btn_del" type="danger" @click="handleDelete" :underline="false">删除</el-link>
              </div>
            </div>

            <div class="box-card">
              <el-form ref="form" :label-position="labelPosition" :rules="rules" :model="form" label-width="120px">
                <el-form-item label="部门id" prop="id">
                  <el-input v-model="form.id" disabled placeholder="请输入部门id"/>
                </el-form-item>
                <el-form-item label="父级节点" prop="pid">
                  <el-input v-model="form.pid" disabled placeholder="请输入父级节点"/>
                </el-form-item>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="考核内容" prop="nrName">
                      <el-input v-model="form.nrName" :disabled="formEdit" placeholder="请输入考核内容"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="排序" prop="nrOrder">
                      <el-input v-model="form.nrOrder" :disabled="formEdit" :min="0" oninput="if(value<0)value=0" type="number" placeholder="请输入"/>
                    </el-form-item>
                  </el-col>

                </el-row>
                <el-row>
                  <el-col>
                    <el-form-item label="内容描述" prop="nrContent">
                      <el-input v-model="form.nrContent" :disabled="formEdit" placeholder="请输入内容描述" type="textarea" :rows="8"/>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item v-if="formStatus == 'update'">
                  <el-button type="primary" @click="create" v-if="this.vm='gengXin'">更新</el-button>
                  <el-button @click="onCancel">取消</el-button>
                </el-form-item>
                <el-form-item v-if="formStatus == 'create'">
                  <el-button type="primary" @click="create" v-if="this.vm='baoCun'">保存</el-button>
                  <el-button @click="onCancel">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
      </el-row>
    </basic-container>

  </div>
</template>

<script>
import {addObj, delObj, fetchListTree, getObj, putObj} from '@/api/admin/syskaohestandardnr'
import {mapGetters} from 'vuex'
export default {
  name: 'Dept',
  data() {
    return {
      filterText: "",
      formEdit: true,
      formStatus: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'nrName'
      },
      rules: {
        nrName: [
          {required: true, message: '请输入部门名称', trigger: 'blur'}
        ],
        nrContent: [
          {required: true, message: '请输入内容描述', trigger: 'blur'},
          {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
        ],
        nrOrder: [
          {required: true, message: '请输入排序值', trigger: 'blur'}
        ]
      },
      labelPosition: 'right',
      form: {
        nrName: "",
        id: "",
        pid: "",
        path: "",
        nrOrder: 99,
        nrContent: "",
      },
      currentId: 0,
      deptManager_btn_add: false,
      deptManager_btn_edit: false,
      deptManager_btn_del: false,
      dataP: "",
    }
  },
  created() {
    this.fetchListTree()
    this.deptManager_btn_add = this.permissions['sys_dept_add']
    this.deptManager_btn_edit = this.permissions['sys_dept_edit']
    this.deptManager_btn_del = this.permissions['sys_dept_del']
  },
  computed: {
    ...mapGetters([
      'elements',
      'permissions'
    ])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
// 获取树结构
    fetchListTree() {
      fetchListTree().then((res) => {
        this.treeData = res.data.data
      })
    },
    // tree
    filterNode(value, data) {
      if (!value) return true
      return data.nrName.indexOf(value) !== -1
    },
    getNodeData(data) {
      this.dataP = data;
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getObj(data.id).then(response => {
        this.form = response.data.data

      })
      this.currentId = data.id
    },
    //编辑
    handlerEdit() {
      if (this.form.id) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    //添加
    handlerAdd() {
      this.resetForm()
      this.form.path = (this.dataP.path == '0' ? null : (this.dataP.path + ',')) + this.dataP.id;
      this.formEdit = false
      this.formStatus = 'create'
      this.form.pid = this.dataP.id;

    },
    //删除
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.fetchListTree()
          this.resetForm()
          this.onCancel()
          this.$notify.closeAll();
          this.$notify.success('删除成功')
        })
      })
    },


    // 添加
    create() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            if (this.form.pid == 0) {
              this.form.path = 0
            }
            putObj(this.form).then((res) => { //编辑
              this.fetchListTree();
              this.onCancel();
              this.$notify.closeAll();
              this.$notify.success('更新成功');
              this.resetForm();
            })
          } else {//添加
            if (this.form.pid == "" || this.form.pid == null) {
              this.form.pid = 0
              this.form.path = 0
            }
            addObj(this.form).then((res) => {
              this.fetchListTree();
              this.onCancel();
              this.$notify.success('创建成功');
              this.resetForm()
            })
          }
        }
      })
    },
//取消
    onCancel() {
      this.formEdit = true
      this.formStatus = ''
    },
//数据处理
    resetForm() {
      this.form = {
        nrName: "",
        id: "",
        pid: "",
        path: "",
        nrOrder: 99,
        nrContent: "",
      }
    }
  }
}
</script>

